import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import MyListView from '../../components/MyListView/MyListView';
import DistributionCarousel  from './distributionCarousel';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {routerRedux} from "dva/router";
import {distribution} from './distribution.less';
import MyStoreOrderItem from "./myStoreOrderItem";
import  caidan from'../../assets/svg/caidan.svg';
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import rili from '../../assets/svg/rili.svg';
import shangxinTime from '../../assets/svg/shangxinTime.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";

const Item = Popover.Item;




class Report extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            tabs:[{title:"今日",type:"0"},{title:"昨日",type:"1"},{title:"近7日",type:"2"},{title:"近30日",type:"3"}]
        };

        this.AlloyTouch = null;
        this.type = "0";
        this.page=0;
    }

    componentDidMount(){
        this.refresh();
    }

    refresh = () => {
        return this.props.dispatch({ type: 'distribution/statisticsEFF',obj:{commissionType:this.type} });
    }


    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };

    renderContent = tab =>{
        const {dispatch,distribution} = this.props;
        const {statisticsList} = this.props.distribution;
        return  <div>
            <WingBlank>
                <Flex justify="between" style={{color:"#999",padding:".3rem 0"}}>
                    <Flex>
                        <Icon type={rili.id} style={{width:".42rem",height:".42rem",marginRight:".1rem"}}></Icon>
                        <div>{statisticsList.currentTime}</div>
                    </Flex>
                    <Flex>
                        <Icon type={shangxinTime.id}></Icon>
                        <div>{statisticsList.currentHour}</div>
                    </Flex>
                </Flex>
                <div style={{background:"#fff",marginBottom:".2rem",padding:".2rem .2rem .4rem .2rem"}}>
                    <Flex>
                        <div style={{background:"#ff0036",width:".05rem",height:".35rem",marginRight:".1rem"}}></div>
                        <div style={{fontSize:".35rem"}}>自主推广</div>
                    </Flex>
                    {statisticsList.selfPromotion&& <Flex justify="between" style={{paddingTop:".5rem"}}>
                        <div style={{textAlign:"center",width:"33%"}}>
                            <div style={{color:"#999",marginBottom:".1rem"}}>点击数</div>
                            <div style={{fontSize:".3rem"}}>{statisticsList.selfPromotion.click||0}</div>
                        </div>
                        <div style={{textAlign:"center",width:"33%"}}>
                            <div style={{color:"#999",marginBottom:".1rem"}}>订单数量</div>
                            <div style={{fontSize:".3rem"}}>{statisticsList.selfPromotion.orderCount||0}</div>
                        </div>
                        <div style={{textAlign:"center",width:"33%"}}>
                            <div style={{color:"#999",marginBottom:".1rem"}}>佣金</div>
                            <div style={{fontSize:".3rem"}}>¥{statisticsList.selfPromotion.commissionAmount||0}</div>
                        </div>
                    </Flex>}

                </div>
                <div style={{background:"#fff",marginBottom:".2rem",padding:".2rem .2rem .4rem .2rem"}}>
                    <Flex>
                        <div style={{background:"#ff0036",width:".05rem",height:".35rem",marginRight:".1rem"}}></div>
                        <div style={{fontSize:".35rem"}}>团员推广</div>
                    </Flex>
                    {statisticsList.otherPromotion&& <Flex justify="between" style={{paddingTop:".5rem"}}>
                        <div style={{textAlign:"center",width:"33%"}}>
                            <div style={{color:"#999",marginBottom:".1rem"}}>点击数</div>
                            <div style={{fontSize:".3rem"}}>{statisticsList.otherPromotion.click||0}</div>
                        </div>
                        <div style={{textAlign:"center",width:"33%"}}>
                            <div style={{color:"#999",marginBottom:".1rem"}}>订单数量</div>
                            <div style={{fontSize:".3rem"}}>{statisticsList.otherPromotion.orderCount||0}</div>
                        </div>
                        <div style={{textAlign:"center",width:"33%"}}>
                            <div style={{color:"#999",marginBottom:".1rem"}}>佣金</div>
                            <div style={{fontSize:".3rem"}}>¥{statisticsList.otherPromotion.commissionAmount||0}</div>
                        </div>
                    </Flex>}

                </div>

            </WingBlank>
        </div>
        };





    render() {
        const {dispatch} = this.props;
        const {incomeDetailList} = this.props.distribution;
        return ( <Flex direction="column" className={distribution} style={{height:"100%"}}>
                <NavTopBar title="详细报表" dispatch={this.props.dispatch}/>
                <Tabs tabs={this.state.tabs} initialPage={0} page={this.page}  onChange={(tab, index) => {
                    let type = tab.type;
                    this.page=index;
                    console.log(index)
                    this.type=type;
                    this.refresh();

                }} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
                    {this.renderContent}
                </Tabs>

            </Flex>

        )


    }
}

export default connect(({ distribution }) => ({ distribution}))(Report);